<!DOCTYPE html>
<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta charset="utf-8" />
		<title>足迹痕迹</title>
	<link rel="stylesheet" href="jquery-easyui-1.5.3/themes/default/easyui.css">
		<link href="jquery-easyui-1.5.3/themes/icon.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/hjwz.css" />
        <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="font_jjkmvgsdpk/iconfont.js"></script>
	    <link rel="stylesheet" href="font_jjkmvgsdpk/iconfont.css">
	    <script src="font_5orzif3vv0i/iconfont.js"></script>
	</head>

	<body>
		<!--
        	批量上传窗口
        -->

		<div id="dlg4" class="easyui-dialog" data-options="modal:true" style="width: 35%; height: 50%; padding: 5px 10px;top:30%" closed="true">
			<form id="form_all_biological" class="layui-form" method="post" enctype="multipart/form-data" style="margin-top: 6px;">
				<input id="footf" class="easyui-filebox" name="file1" style="width: 100%;" data-options="buttonText:'选择',prompt:'请选择文件...',
   							 multiple:true,label:'图片上传',prompt:'选择图片（2M以内）' ">
				<hr/>
				<div id="footiamge" style="margin-left:20px;margin-top:10px ;"></div>
			</form>
		</div>
		<!--
        	提取人双向选择框窗口
        -->
		<div id="dlg5" class="easyui-dialog" data-options="modal:true" style="width: 26%; height: 42%; padding: 5px 10px;top:30%" closed="true" >
			<table style="margin-left: 15px;margin-top: 10px;">
				<tr>
					<td>
						<div id="dl12" style="height:200px;width:150px;"></div>
					</td>
					<td>
						<button id="dl_add2" class="easyui-linkbutton" style="width:50px;margin:5px;">添加</button><br />
						<button id="dl_add_all2" class="easyui-linkbutton" style="width:50px;margin:5px;">全选</button><br />
						<button id="dl_remove_all2" class="easyui-linkbutton" style="width:50px;margin:5px;">全移</button><br />
						<button id="dl_remove2" class="easyui-linkbutton" style="width:50px;margin:5px;">移除</button>
					</td>
					<td>
						<div id="dl22" style="height:200px;width:150px;"></div>
					</td>
				</tr>
			</table>
		</div>
		<!--
        	添加窗口
        -->
		<div id="dlg6" class="easyui-dialog" data-options="modal:true"  style="width: 100%; height: 90%; padding: 5px 10px;top:50px" closed="true" >
			<form id="handForm2" method="post" enctype="multipart/form-data">
				<div id="div">
					<table id="form_table2" class="form_table">
						<tr>
							<td class="td_left">
								序号：
							</td>
							<td  class="td_right"><input name="serialNo" class="easyui-textbox" style="width:100%" readonly="readonly" id="serialNo" value="1" /></td>

							<td class="td_left">
								痕迹照片：
							</td>
							<td  class="td_right"><input class="easyui-filebox"  name="file" data-options="buttonText:'选择',prompt:'请选择文件...'" style="width:100%" /></td>

							<td class="td_left">
								物证名称：
							</td>
							<td  class="td_right"><input class="easyui-textbox tdwidth" style="width:100%" /></td>

						</tr>
						<tr>
							<td class="td_left">
								提取人：
							</td>
							<td><input class="tiquren" id="footman" onclick="addMan(this)" style="width:100%" /></td>

							<td class="td_left" >
								提取日期：
							</td>
							<td class="td_right"><input class="easyui-datebox" style="width:100%" /></td>
							<td class="td_left" >
								遗留部位：
							</td>
							<td class="td_right"><input class="easyui-textbox tdwidth" style="width:100%" /></td>

						</tr>
						<tr>
							<td class="td_left">
								足迹类型：
							</td>
							<td colspan="3">
								<label style="margin-left: 20px;">鞋印</label><input type="radio" checked="checked" name="type" value="鞋印">
								<label style="margin-left: 20px;">袜印</label><input type="radio" name="type" value="袜印">
								<label style="margin-left: 20px;">赤足印</label><input type="radio" name="type" value="赤足印">
								<label style="margin-left: 20px;">其它</label><input type="radio" name="type" value="其它">
							</td>
							<td class="td_left">
								基本特征：
							</td>
							<td><input class="easyui-textbox tdwidth" style="width:100%" /></td>
						</tr>
						<tr>
							<td class="td_left">提取方法：</td>
							<td colspan="5">
								<label style="margin-left: 20px;">直接照相</label><input type="radio" checked="checked" name="takeff" value="直接照相">
								<label style="margin-left: 20px;">静电/照相</label><input type="radio" name="takeff" value="静电/照相">
								<label style="margin-left: 20px;">制模/照相</label><input type="radio" name="takeff" value="制模/照相">
								<label style="margin-left: 20px;">显现/照相</label><input type="radio" name="takeff" value=" 显现/照相">
								<label style="margin-left: 20px;">其他/照相</label><input type="radio" name="takeff" value="其他/照相">
								<label style="margin-left: 20px;">即时贴提取 </label><input type="radio" name="takeff" value="即时贴提取 ">
							</td>

						</tr>
						<tr>
							<td class="td_left">
								鉴定书上传：
							</td>
							<td>
								<input class="easyui-filebox" name="file" data-options="buttonText:'选择',prompt:'请选择文件...'" style="width:100%" />
							</td>
							<td class="td_left">
								提交指纹系统：

							</td>
							<td>
								<input type="checkbox" name="a" value="1">

							</td>
							<td class="td_left">
								是否列入现场提取登记表：
							</td>
							<td colspan="3">
								<input type="checkbox" name="b" value="1">

							</td>

						</tr>
					</table>
				</div>
			</form>

		</div>

		<!--
        datagridbar工具栏
        -->
		<div id="handGridToolbar" style="display: none;">
			<a class="actions add easyui-linkbutton " iconCls="icon-add" plain="true">新增</a>
			<a class="actions manypicture easyui-linkbutton " iconCls="icon-large-picture" plain="true">批量上传</a>
			<a class="actions remove easyui-linkbutton " iconCls="icon-remove" plain="true">删除</a>
		</div>
		<table id="handdatagrid">
		</table>
			<div id="content_div">
			<div id="content_div_left">
				<table border="1" cellspacing="0" cellpadding="0" width="100%" style="border-color: #CEEBFF;font-size: 12px;">
					<th colspan="4" id="left_table_th" style="font-size:12px;height:32px;background-image: url(images/pictitle.gif);">
						<svg style="width: 1em;height: 1em;vertical-align: -0.1em;fill: currentColor;overflow: hidden;" aria-hidden="true ">
							<use xlink:href="#icon-shou "></use>
						</svg>足迹照片缩略图显示（双击小图看大图）</th>
					<tr>
						<td class="left_table_td">
							<img title="双击查看大图"  class="left_table_td_img" src="easyui/themes/bootstrap/images/passwordbox_close.png"> &nbsp;&nbsp;&nbsp;
						</td>
						<td class="left_table_td">
							<img title="双击查看大图"  class="left_table_td_img"  src="easyui/themes/bootstrap/images/passwordbox_close.png"> &nbsp;&nbsp;&nbsp;
						</td>
						<td class="left_table_td">
							<img title="双击查看大图"  class="left_table_td_img" src="easyui/themes/bootstrap/images/passwordbox_close.png"> &nbsp;&nbsp;&nbsp;
						</td>
						<td class="left_table_td">
							<img  title="双击查看大图"  class="left_table_td_img"  src="easyui/themes/bootstrap/images/passwordbox_close.png"> &nbsp;&nbsp;&nbsp;
						</td>
					</tr>
					<tr>
						<td class="left_table_tdNumber" >
							<a ondblclick="" href="">1 </a>
						</td>
						<td class="left_table_tdNumber">
							<a ondblclick="" href="">2 </a>
						</td>
						<td class="left_table_tdNumber">
							<a ondblclick="" href="">3 </a>
						</td>
						<td class="left_table_tdNumber">
							<a ondblclick="" href="">4 </a>
						</td>
					</tr>
					<!-- 最后一行 -->

				</table>
			</div>
			<div style="float:left; border:1px solid #CEEBFF;width:29.6%;height: 100%;">
				<table id="handtableinfo" border="1" bordercolor="#CEEBFF" cellspacing="0" cellpadding="0" style="width:99%;font-size: 12px;">
					<tr>
						<th colspan="2" style="font-size:12px;height:32px;background-image: url(images/pictitle.gif);"><label style="float:left;margin-top: 5px;"> <svg style="width: 1em;height: 1em;vertical-align: -0.1em;fill: currentColor;overflow: hidden;" aria-hidden="true ">
						<use xlink:href="#icon-shou "></use>
					</svg>足迹基本信息</label>
							<a style="float: right;" class="easyui-linkbutton" plain="true" id="editHandInfo" iconcls="icon-edit">编辑</a>
						</th>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">序号 </td>
						<td>1</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">物证名称 </td>
						<td>22</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">足迹类型 </td>
						<td>指纹</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">足迹编码 </td>
						<td>1</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">遗留部位 </td>
						<td> 2</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">基本特征 </td>
						<td>直接拍照</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取方法 </td>
						<td></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取人 </td>
						<td> 测试、公共查询用户</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取日期 </td>
						<td>2019-04-25</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提交指纹系统 </td>
						<td>否</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">指纹状态跟踪 </td>
						<td>未发送 </td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">是否列入现场提取登记表</td>
						<td>是</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">上传时间 </td>
						<td>2019-04-25 10:18 </td>
					</tr>

				</table>
				<table id="handtableinfo_edit" border="1" bordercolor="#CEEBFF" cellspacing="0" cellpadding="0" style="width:99%;display: none;font-size: 12px;">
					<tr>
						<th colspan="2" style="font-size:12px;height:32px;background-image: url(images/pictitle.gif);"><label style="float:left;margin-top: 5px;"> <svg style="width: 1em;height: 1em;vertical-align: -0.1em;fill: currentColor;overflow: hidden;" aria-hidden="true ">
						<use xlink:href="#icon-shou "></use>
					</svg>足迹基本信息</label>
							<a style="float: right;" class="easyui-linkbutton" plain="true" iconcls="icon-edit">足迹处理</a>
						</th>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">序号 </td>
						<td style="width:70%">1</td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">物证名称 </td>
						<td><input   type="text" class="tiquren" ></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">手印类型 </td>
						<td> <label style="margin-left: 20px;">直接照相</label><input type="radio" checked="checked" name="takeff" value="直接照相">
								<label style="margin-left: 20px;">静电/照相</label><input type="radio" name="takeff" value="静电/照相">
								<label style="margin-left: 20px;">制模/照相</label><input type="radio" name="takeff" value="制模/照相">
								<label style="margin-left: 20px;">显现/照相</label><input type="radio" name="takeff" value=" 显现/照相">
								<label style="margin-left: 20px;">其他/照相</label><input type="radio" name="takeff" value="其他/照相">
								<label style="margin-left: 20px;">即时贴提取 </label><input type="radio" name="takeff" value="即时贴提取 "></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">指纹编码 </td>
						<td><input   type="text" class="tiquren" ></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">遗留部位 </td>
						<td><input   type="text" class="tiquren" ></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">基本特征 </td>
						<td><input   type="text" class="tiquren" ></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取方法 </td>
						<td><label style="margin-left: 20px;">直接照相</label><input type="radio" checked="checked" name="takeff" value="直接照相">
								<label style="margin-left: 20px;">静电/照相</label><input type="radio" name="takeff" value="静电/照相">
								<label style="margin-left: 20px;">制模/照相</label><input type="radio" name="takeff" value="制模/照相">
								<label style="margin-left: 20px;">显现/照相</label><input type="radio" name="takeff" value=" 显现/照相">
								<label style="margin-left: 20px;">其他/照相</label><input type="radio" name="takeff" value="其他/照相">
								<label style="margin-left: 20px;">即时贴提取 </label><input type="radio" name="takeff" value="即时贴提取 "></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取人 </td>
						<td> <input type="text"  class="tiquren" id="m" onclick='addMan(this)'></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提取日期 </td>
						<td><input class="easyui-datebox" style="width: 200px;"/></td>
					</tr>
					<tr>
						<td style="background-color: #EEF5FF;width:30%">提交足迹系统 </td>
						<td><input type="checkbox" name="a" value="1"></td>
					</tr>

					<tr>
						<td style="background-color: #EEF5FF;width:30%">是否列入现场提取登记表</td>
						<td><input type="checkbox" name="b" value="1"></td>
					</tr>
					<tr>
						<td colspan="4" style="text-align: center;">
							<a class="easyui-linkbutton" id="" iconcls="icon-edit">保存</a>
							<a class="easyui-linkbutton" id="handedit_back" iconcls="icon-cancel">取消</a>
						</td>
					</tr>
				</table>

			</div>
		</div>
		<script>
			$(function() {
				
			var rowNum = 1;
			var Extperson; //提取人id
				
				$("#handdatagrid").datagrid({
					rownumbers: false,
					nowrap: false,
					border: true,
					border: true,
					 width: $(window).width(),
					toolbar: '#handGridToolbar',
				})
				var handdatagridPanel = $("#handdatagrid").datagrid("getPanel");
				handdatagridPanel.on("click", "a.add", function() {
					$("#dlg6").dialog({
						buttons: [{
								text: "添加",
								iconCls: "icon-save",
								handler: function() {
									rowNum = rowNum + 1;
									/*	$("#serialNo").textbox('setValue',rowNum);	
									var iTable = $("#form_table").clone();
									$("#div").append(iTable);*/

									var table = "<div><table class='form_table' id='form_table2" + rowNum + "' >" +
										"<tr>" +
										"<td id='td_left' >" +
										"序号：" +
										"</td>" +
										"<td id='td_right'><input class='easyui-textbox' style='width:100%' readonly='readonly' value=" + rowNum + "></td>" +
										"<td id='td_left'  >" +
										"痕迹照片：" +
										"</td>" +
										"<td  id='td_right'><input class='easyui-filebox'  name='file' data-options=" + "buttonText:'选择',prompt:'请选择文件...'" + " style='width:100%' /></td>"

										+
										"<td id='td_left'  >" +
										"物证名称：" +
										"</td>" +
										'<td  class="td_right"><input class="easyui-textbox"  style="width:100%;" /></td>'

										+
										"</tr>" +
										"<tr>" +
										"<td id='td_left'  >" +
										"提取人：" +
										"</td>" +
										"<td id='td_right'><input class='tiquren' id='footman" + rowNum + "' onclick='addMan(this)' style='width:100%' /></td>"

										+
										"<td id='td_left'  >" +
										"提取日期：" +
										"</td>" +
										"<td id='td_right'><input class='easyui-datebox'  style='width:100%' /></td>" +
										"<td id='td_left'  >遗留部位：</td>" +
										'<td  class="td_right"><input class="easyui-textbox"  style="width:100%;" /></td>' +
										"</tr><tr>" +
										"<td id='td_left'  >手印类型：</td>"

										+
										"<td colspan='3'>"+	
										"<label style='margin-left: 20px;'>鞋印</label><input type='radio' checked='checked' name='type" + rowNum + "' value='鞋印'>"
										+	"<label style='margin-left: 20px;'>袜印</label><input type='radio' name='type" + rowNum + "' value='袜印'>"
										+	"<label style='margin-left: 20px;'>赤足印</label><input type='radio' name='type" + rowNum + "' value='赤足印'>"
								         +   "<label style='margin-left: 20px;'>其它</label><input type='radio' name='type" + rowNum + "' value='其它'></td>" +
										"<td id='td_left'  >基本特征：</td>" +
										'<td  class="td_right"><input class="easyui-textbox"  style="width:100%;" /></td>' +
										"</tr><tr><td id='td_left'  >提取方法：</td>" +
										"<td colspan='5'>"+
										"<label style='margin-left: 20px;'>静电/照相</label><input type='radio' name='takeff" + rowNum + "' value='静电/照相'>"
								+"<label style='margin-left: 20px;'>制模/照相</label><input type='radio' name='takeff" + rowNum + "' value='制模/照相'>"
								+"<label style='margin-left: 20px;'>显现/照相</label><input type='radio' name='takeff" + rowNum + "' value=' 显现/照相'>"
								+"<label style='margin-left: 20px;'>其他/照相</label><input type='radio' name='takeff" + rowNum + "' value='其他/照相'>"
								+"<label style='margin-left: 20px;'>即时贴提取 </label><input type='radio' name='takeff" + rowNum + "' value='即时贴提取 '>" +
										"</td></tr><tr>" +
										"<td id='td_left'  >鉴定书上传：</td><td>" +
										"	<input class='easyui-filebox'  name='file' data-options=" + "buttonText:'选择',prompt:'请选择文件...'" + " style='width:100%' /></td>"

										+
										"<td id='td_left'  >提交指纹系统：</td><td>"

										+
										"<input    type='checkbox' name='a' value='1'></td>"

										+
										"<td id='td_left'  >	是否列入现场提取登记表：</td>"

										+
										"<td colspan='3'><input    type='checkbox' name='b' value='1'></td></tr></table></div>"
									$("#handForm2").append(table);
									$.parser.parse($("#handForm2").parent());
								}
							}, {
								text: "删除",
								iconCls: "icon-remove",
								handler: function() {
									if(rowNum == 1) {
										return;
									}
									$("#form_table2" + rowNum).remove();
									rowNum = rowNum - 1;
								}
							}, {
								text: "保存",
								iconCls: "icon-save",
								handler: function() {

								}
							}, {
								text: "取消",
								iconCls: "icon-cancel",
								handler: function() {
							$("#dlg6").dialog("close");
								}
							}

						]
					});
					$("#dlg6").dialog("open").dialog('setTitle', '脚印基本信息新增');
				}).on("click", "a.manypicture", function() {
						$("#dlg4").dialog({
						buttons: [{
								text: "添加",
								iconCls: "icon-save",
								handler: function() {
								   	
								 }
								}, {
								text: "取消",
								iconCls: "icon-cancel",
								handler: function() {
							$("#dlg4").dialog("close");
								}
							}
						]
						});
					$("#dlg4").dialog("open").dialog('setTitle', '多图片上传');
					$("#footf").textbox('setValue','');
					$("#footiamge").html('');
				});

			})


			function addMan(obj) {
				console.log(obj.id);
				Extperson = obj.id;
				
				$("#dlg5").dialog({
						buttons: [{
								text: "确定",
								iconCls: "icon-save",
								handler: function() {
								   	var selVal = '';
				var rows = $("#dl22").datalist('getRows');
				for(var i = 0; i < rows.length; i++) {
					selVal = selVal + rows[i].text + ",";
				};
				var value = selVal.substring(1, selVal.length - 1);
				$('#' + Extperson).val(value);
				$("#dlg5").dialog("close");
								 }
								}
						]
						});
				$("#dlg5").dialog("open").dialog('setTitle', '选择提取人');
			};
			
			//多文件上传
			$('#footf').filebox({
				onChange: function(value) {
					var f = $(this).next().find('input[type=file]')[0]; 
					console.log(f);
					if(f.files && f.files[0]) {
						// 更换图片时清空原图片展示内容
						      
						$('#footiamge').html('');       
						for(var i = 0; i < f.files.length; i++) {        
							var reader = new FileReader(f.files[i]);        
							reader.onload = function(e) {
								//append为在元素中的末尾添加内容
								          console.log(e.target.result);
								$('#footiamge').append("<img src='" + e.target.result + "' width='200px' height='100px'>");        
							}        
							reader.readAsDataURL(f.files[i]);
						}    
					}  
				}
			})

			$("#editHandInfo").click(function() {
				$("#handtableinfo").hide();
				$("#handtableinfo_edit").show();

			})
			$("#handedit_back").click(function() {
				$("#handtableinfo").show();
				$("#handtableinfo_edit").hide();
			})
		</script>

		<script>
			//提取人双向列表
			$(function() {
				$('#dl12').datalist({
					url: 'json.json',
					method: 'get',
					valueField: 'value',
					textField: 'text',
					lines: false,
					checkbox: true,
					singleSelect: false
				});
				$('#dl22').datalist({
					//url:'file:///E:/prompt.json',
					//method:'get',	
					valueField: 'value',
					textField: 'text',
					lines: false,
					checkbox: true,
					singleSelect: false
				});

				//移动按钮
				$("#dl_add2").click(function() {
					var rows = $("#dl12").datalist("getSelections");
					/*
					//方式1
					var rowArray = new Array();
					$(rows).each(function(i){
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value:value,
							text:text
						};
						rowArray.push(row);
						//删除
						var rowIndex = $("#dl1").datalist("getRowIndex", rows[i]);
						$("#dl1").datalist("deleteRow",rowIndex);
					});
					rowArray = rowArray.concat($("#dl2").datalist("getRows"));//合并
					var total = { "total":rowArray.length,rows:rowArray };
					$("#dl2").datalist("loadData",rowArray);
					*/
					//方式2
					$(rows).each(function(i) {
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value: value,
							text: text
						};
						//添加
						//$("#dl2").datalist("appendRow",row);
						$("#dl22").datalist("insertRow", {
							index: 0,
							row: row
						}); //作为第一条
						//删除
						var rowIndex = $("#dl12").datalist("getRowIndex", rows[i]);
						$("#dl12").datalist("deleteRow", rowIndex);
					});
					//移动完后重新加载dl2,否则显示不正常
					$("#dl22").datalist("loadData", $("#dl22").datalist('getRows'));
				});
				//移动按钮
				$("#dl_add_all2").click(function() {
					var data = $("#dl12").datalist("getData");
					var rows = data.rows;
					var rowsLength = rows.length;
					var indexArray = new Array();
					for(var i = 0; i < rowsLength; i++) {
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value: value,
							text: text
						};
						//添加
						$("#dl22").datalist("appendRow", row);
					}
					//删除
					var rows = $("#dl12").datalist('getRows');
					for(var i = rows.length - 1; i >= 0; i--) {
						$("#dl12").datalist("deleteRow", i);
					}
					//移动完后重新加载dl2,否则显示不正常
					$("#dl22").datalist("reload");
				});
				$("#dl_remove2").click(function() {
					var rows = $("#dl22").datalist("getSelections");
					/*
					//方式1
					var rowArray = new Array();
					$(rows).each(function(i){
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value:value,
							text:text
						};
						rowArray.push(row);
						//删除
						var rowIndex = $("#dl2").datalist("getRowIndex", rows[i]);
						$("#dl2").datalist("deleteRow",rowIndex);
					});
					rowArray = rowArray.concat($("#dl1").datalist("getRows"));//合并
					var total = { "total":rowArray.length,rows:rowArray };
					$("#dl1").datalist("loadData",rowArray);
					*/
					//方式2
					var rows = $("#dl22").datalist("getSelections");
					var rowArray = new Array();
					$(rows).each(function(i) {
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value: value,
							text: text
						};
						//添加
						//$("#dl1").datalist("appendRow",row);
						$("#dl12").datalist("insertRow", {
							index: 0,
							row: row
						}); //作为第一条
						//删除
						var rowIndex = $("#dl22").datalist("getRowIndex", rows[i]);
						$("#dl22").datalist("deleteRow", rowIndex);
					});
					//移动完后重新加载dl1,否则显示不正常
					$("#dl12").datalist("loadData", $("#dl12").datalist('getRows'));

				});
				$("#dl_remove_all2").click(function() {
					var data = $("#dl22").datalist("getData");
					var rows = data.rows;
					var rowsLength = rows.length;
					var indexArray = new Array();
					for(var i = 0; i < rowsLength; i++) {
						var value = rows[i].value;
						var text = rows[i].text;
						var row = {
							value: value,
							text: text
						};
						//添加
						$("#dl12").datalist("appendRow", row);
					}
					//删除
					var rows = $("#dl22").datalist('getRows');
					for(var i = rows.length - 1; i >= 0; i--) {
						$("#dl22").datalist("deleteRow", i);
					}
					//移动完后重新加载dl1
					$("#dl12").datalist("reload");
				});
			});
		</script>
	</body>

</html>